<template>
    <view id="billingDetails">
        <view class="top">
            <!-- <button class="button" type="primary" size="mini">2019 <uni-icons class="icon" color="#fff" size="8" type="arrowdown"></uni-icons></button> -->
            <picker :value="index" :range="time" range-key="time" @change="selectTime">
            	<!-- <view class="uni-input">{{time[index].time}} <uni-icons class="icon" color="#fff" size="8" type="arrowdown"></uni-icons></view> -->
                <button class="button" type="primary" size="mini">{{time[index].time}}<uni-icons class="icon" color="#fff" size="8" type="arrowdown"></uni-icons></button>
            </picker>
            <view class="total">
                <view class="total-top">支出：￥ {{expenditure}}</view>
                <view class="total-bottom">收入：￥ {{income}}</view>
            </view>
        </view>
        <view class="content">
            <view class="content-item" v-for="(item,index) in detailList" :key="index">
                <view class="content-front">
                    <view class="name">{{item.detail_name}}</view>
                    <view class="time">{{item.detail_time}}</view>
                </view>
                <view class="content-value">{{item.amount}}</view>
            </view>
            <!-- <view class="tip" v-if="!detailList.length">暂无数据</view> -->
        </view>
        <view class="nodata" v-if="!detailList.length" >
             <view class="msfont ms-wushuju"></view>
             <view class="no">无数据</view>
        </view>
    </view>
</template>
<script>
    import uniIcons from '@/components/uni-icons/uni-icons.vue'
    import { getWalletLog } from '@/common/api.js'
    export default {
        name: "billingDetails",
        data() {
            return {
                time:[],
                index:0,
                income:'1000.00',
                expenditure:'1000.00',
                currentPage:1,
                pageSize:12,
                total:'',
                totalPage:1,
                detailList:[],
                paramTime:'',
                loadingType:false
            };
        },
        components: {
            uniIcons
        },
        methods: {
            getData(){
                let p = getWalletLog({
                    page:this.currentPage,
                    pageSize:this.pageSize,
                    time:this.paramTime
                }).then((res)=>{
                    const data = res.data;
                    uni.hideLoading()
                    if(data.errcode==0){
                        this.detailList=[]
                        data.data.length && data.data.forEach((e)=>{
                            this.detailList.push({
                                id:e.id,
                                detail_name:this.typeName(e.type),
                                amount:`${e.state==1?'+ ':'- '}${e.money}`,
                                detail_time:e.create_time?e.create_time.slice(0,19):'',
                            })
                        })
                        this.income=data.income.toFixed(2);
                        this.expenditure=data.outcome.toFixed(2);
                        this.total=data.total;
                        this.totalPage=data.totalPage;
                    }else if(data.errcode==1000 || data.errcode==1001){
                        uni.removeStorageSync('token');
                        uni.reLaunch({
                        	url:'/pages/home/welcome'
                        })
                    }else{
                        uni.showToast({
                        	icon: 'none',
                        	title:data.msg
                        });
                    }
                })
                return p;
            },
            typeName(type){
                return ['','充值','服务费','转出','转入','转出-云比赛','转入-来着云比赛','提现','退费','赛事管理费','自动分配','自动分配','自动分配','自动分配'][type]
            },
            prepareTheData(){
                let year=2017;
                let month=7
                let nowYear = new Date().getFullYear();
                let nowMonth = new Date().getMonth()+1;
                // let nowMonth = 7；
                this.time=[];
                let counter=1;
                while(year<nowYear || month<nowMonth){
                    this.time.push({time:`${year}年${month}月`,value:`${year}-${month}-01`});
                    if(month>11){
                        year++;
                        month=0;
                    }
                    month++;
                    counter++;
                    if(counter>1000){break;}
                }
                this.time.push({time:`${nowYear}年${nowMonth}月`,value:`${nowYear}-${nowMonth}-01`})
                this.index=this.time.length-1;
                this.paramTime=`${nowYear}-${nowMonth}-01`;
            },
            selectTime(e){
                // console.log(e)
                uni.showLoading({
                    title: '加载中'
                });
                this.index=e.detail.value;
                this.paramTime=this.time[e.detail.value].value;
                this.currentPage=1;
                this.getData()
            }
        },
        onLoad() {
            this.prepareTheData()
            this.getData()
        },
        onPullDownRefresh(){
            this.currentPage=1;
            this.getData()
            setTimeout(function () {
            		uni.stopPullDownRefresh();
            }, 1000);
        },
        onReachBottom(){
            if(this.loadingType){
                return false;
            }
            this.loadingType=true;
            this.currentPage++;
            uni.showToast({
                icon: 'none',
                title:'加载中'
            });
            this.currentPage<=this.totalPage && getWalletLog({
                page:this.currentPage,
                pageSize:this.pageSize,
                time:this.paramTime
            }).then((res)=>{
                const data = res.data;
                if(data.errcode==0){
                    data.data.length && data.data.forEach((e)=>{
                        this.detailList.push({
                            id:e.id,
                            detail_name:this.typeName(e.type),
                            amount:`${e.state==1?'+ ':'- '}${e.money}`,
                            detail_time:e.create_time?e.create_time.slice(0,19):'',
                        })
                    })
                    // this.income=data.income.toFixed(2);
                    // this.expenditure=data.outcome.toFixed(2);
                    // this.total=data.total;
                    // this.totalPage=data.totalPage;
                    this.loadingType=false;
                }else if(data.errcode==1000 || data.errcode==1001){
                    uni.removeStorageSync('token');
                    uni.reLaunch({
                    	url:'/pages/home/welcome'
                    })
                }else{

                }
            })
        }
    };
</script>
<style lang="scss">
    #billingDetails {
        position: relative;
        height: 100%;
        .top{
            display: flex;
            justify-content: space-between;
            .button{
                height: 60rpx;
                margin-left: 30rpx;
                margin-top: 20rpx;
                color: #fff;
                background-color: #007aff;
                // display: inline-block;
                // line-height: 2.3;
                // font-size: 13px;
                // padding: 0 1.34em;
                // &:after{
                //     content: " ";
                //         width: 200%;
                //         height: 200%;
                //         position: absolute;
                //         top: 0;
                //         left: 0;
                //         border: 1px solid rgba(0,0,0,.2);
                //         -webkit-transform: scale(.5);
                //         transform: scale(.5);
                //         -webkit-transform-origin: 0 0;
                //         transform-origin: 0 0;
                //         box-sizing: border-box;
                //         border-radius: 10px;
                // }
            }
            .icon{
                margin-left: 10rpx;
            }
            .total{
                padding: 10rpx;
                padding-top: 10rpx;
                padding-right: 30rpx;
                .total-top,.total-bottom{
                    font-size: 24rpx;
                    color: #999;
                }
            }
        }
        .content {
            .tip{
                text-align: center;
                font-size: 40rpx;
                margin-top: 100rpx;
            }
            .content-item{
                display: flex;
                align-items: center;
                justify-content: center;
                flex: 1;
                background: #fff;
                padding: 20rpx 30rpx;
                padding-left: 50rpx;
                .content-value{
                    padding: 10rpx 30rpx;
                    font-size: 32rpx;
                    font-weight: bold;
                }
                .content-front{
                    flex: 1;
                    .name{
                        font-size: 32rpx;
                        font-weight: bold;
                    }
                    .time{
                        font-size: 24rpx;
                        color: #999;
                    }
                }
            }
        }
        .nodata{
            position: fixed;
            top: 50%;
            left: 50%;
            margin-left: -105rpx;
            margin-top: -147rpx;
            .ms-wushuju{
                font-size: 150rpx;
                color: #ccc;
            }
            .no{
                color: #aaa;
                text-align: center;
                margin-left: -20rpx;
                margin-top: -55rpx;
                font-size: 40rpx;
            }
        }
    }
</style>
